/*
 * Teclado Virtual jquery
 * Sergio Jara. 18/06/2010
 */
var botones = [0,1,2,3,4,5,6,7,8,9];

function random() {
	botones.sort(function (a, b) { i = Math.floor((Math.random() * 100 - 50)); return i; });
};

function reestablecer(){
	random();
};

function crearTeclado(pinBoxId, divTecladoId){
	//limpiamos el valor del pin
	$("#"+pinBoxId).attr("value","");
	
	//Insertamos los numeros dentro del contendor
	$("<ul id=\"" + divTecladoId + "_numeros\" class=\"contenedor_botones\">").appendTo("#"+divTecladoId);
	$.each(botones, function(n,value){
		$("<li class=\"numeros\" id=\""+n+"\">"+value+"</li>").appendTo("#" + divTecladoId + "_numeros");
	});
	
	//Seteamos accion onclick en los numeros
	$("#"+divTecladoId+" ul li.numeros")
	.click( function(){
	    var valor = $("#"+pinBoxId).attr("value");
		//$("#"+pinBoxId).attr("value", valor + botones[this.id] );
		$("#"+pinBoxId).val( valor + botones[this.id] );
		
		reestablecer();
	});
	
	//Seteamos accion onmouseover/out en los numeros
	$("#"+divTecladoId+" ul.contenedor_botones li.numeros")
	.hover( function(){ //onmouseover
		var i = 0; 
		$("#"+divTecladoId+" ul.contenedor_botones li.numeros").each( function(){
			botones[i] = this.innerHTML;
			this.innerHTML = "*";
			i = i + 1;
		});
		$(this).addClass("when_numeros_over");
	}, function(){  //onmouseout
		var i = 0; 
		$("#"+divTecladoId+" ul.contenedor_botones li.numeros").each( function(){
			this.innerHTML = botones[i];
			i = i + 1;
		});
		$(this).removeClass("when_numeros_over");
	});
	
	//Insertamos las opciones dentro del contenedor
	$("<li title=\"Borrar todo\" class=\"teclado_borrar\">Borrar</li>").appendTo("#" + divTecladoId + "_numeros");
	
	//Seteamos accion onclick en el boton borrar
	$("#"+divTecladoId+" li.teclado_borrar").click(function(){
		$("#"+pinBoxId).attr("value","");
	});
	
	//Seteamos estilo para los botones al pasar el mouse encima
	$("#"+divTecladoId+" ul.contenedor_botones li.teclado_borrar")
	.hover( function(){
		$(this).addClass("when_borrar_over");
	}, function(){
		$(this).removeClass("when_borrar_over");
	});
};